<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>问卷管理</el-breadcrumb-item>
      <el-breadcrumb-item>回收站</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="25">
        <el-col :span="10">
          <!-- 搜索区域 -->
          <el-input
            placeholder="请输入搜索内容"
            v-model="queryInfo.query"
            clearable
            @clear="getGarbageList"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getGarbageList"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>
    </el-card>

    <!-- 卡片布局 -->
    <div v-if="dataShowType == 'gird'" class="project-grid-container">
      <div
        v-if="garbageList.length"
        v-loading="garbageListLoading"
        class="project-grid-view"
      >
        <div
          v-for="p in garbageList"
          :key="p.id"
          class="project-grid-item-view pointer"
        >
          <el-row align="middle" justify="center" type="flex">
            <el-col :span="19">
              <el-tooltip :content="p.title" placement="top">
                <p class="project-title">
                  {{ p.title }}
                </p>
              </el-tooltip>
            </el-col>
          </el-row>

          <p class="project-grid-view-time">
            删除时间：{{ p.deleteTime | FormatDate("yyyy-MM-dd") }}
          </p>

          <!-- 相关操作 -->
          <div class="gird-operating-btns">
            <el-button type="text" @click="garbageRefresh(p.qid)">
              <i class="el-icon-refresh" />
              恢复
            </el-button>

            <el-popconfirm
              v-if="p.status != 2"
              title="确定彻底删除该问卷吗？"
              @confirm="deletegarbage(p.qid)"
            >
              <el-button slot="reference" class="pink-text-btn" type="text">
                <i class="el-icon-delete" />
                删除
              </el-button>
            </el-popconfirm>
          </div>
        </div>
      </div>

      <!-- 数据为空时显示的界面 -->
      <div v-if="!garbageListLoading && garbageList.length == 0">
        <!-- <data-empty /> -->
        <p>回收站为空...</p>
      </div>
    </div>

    <!-- 分页组件 -->
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[1, 2, 5, 100]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    this.getGarbageList();
  },
  data() {
    return {
      queryInfo: {
        query: "", //查询信息
        pageNum: 1, //当前页
        pageSize: 4, //每一页最大数
      },
      garbageList: [], //用户列表
      total: 0, //总记录数
      dataShowType: "gird",
      garbageListLoading: false,
    };
  },

  methods: {
    async getGarbageList() {
      let name = window.sessionStorage.getItem("name");
      await this.$http({
        method: "post",
        url: "/getQuestionnaireFromBin",
        data: {
          query: this.queryInfo.query,
          pageNum: this.queryInfo.pageNum,
          pageSize: this.queryInfo.pageSize,
          name: name,
        },
      }).then((response) => {
        this.garbageList = response.data.data.list;
        this.total = response.data.data.total;
      });
    },

    //最大数
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getQestionnaireList();
    },

    //pageNum触发的动作
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage;
      this.getQestionnaireList();
    },

    //恢复问卷
    async garbageRefresh(qId) {
      const confirmResult = await this.$confirm("确认恢复此问卷?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err);
      if (confirmResult != "confirm") {
        //取消
        return this.$message.info("已取消恢复");
      }
      await this.$http({
        method: "post",
        url: "/recoveryDeletedQuestionnaire?qId=" + qId,
      }).then((response) => {
        if (response.data.code == "666") {
          // console.log(response);
          this.$message.success("问卷恢复成功!");
          this.getGarbageList();
        } else {
          this.$message.error(response.data.message);
        }
      });
    },

    //彻底删除问卷
    async deletegarbage(qId) {
      await this.$http({
        method: "delete",
        url: "/deleteQuestionnaireByQid?qId=" + qId,
      }).then((response) => {
        if (response.data.code == "666") {
          // console.log(response);
          this.$message.success(response.data.message);
          this.getGarbageList();
        } else {
          this.$message.error(response.data.message);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
/* 面包屑样式 */
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 17px;
}
.my-project-container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  align-content: center;
}

.back-view {
  display: flex;
  width: 80%;
  align-content: flex-start;
  margin: 10px;
}

.filter-view {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
}

.show-view-type-icon {
  color: white;
  font-size: 18px;
  -webkit-text-stroke: 0.5px #a8a8a8;
  margin: 5px;
  cursor: pointer;
}

.show-view-type-icon-active {
  color: rgba(92, 155, 249, 100);
  -webkit-text-stroke: 0.5px rgba(92, 155, 249, 100);
}

.project-grid-container {
  margin-top: 20px;
  display: flex;
  width: 100%;
  justify-content: center;
}

.project-grid-view {
  display: flex;
  width: 1045px;
  flex-direction: row;
  flex-wrap: wrap;
}

.project-table-view {
  margin-top: 20px;
  width: 80%;
}

.project-grid-item-view {
  width: 169px;
  height: 199px;
  line-height: 20px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 100);
  text-align: center;
  margin: 20px;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);

  .project-title {
    color: rgba(16, 16, 16, 100);
    font-size: 14px;
    text-align: left;
    line-height: 20px;
    max-height: 20px;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .project-grid-view-status {
    display: inline-block;
    width: 7px;
    height: 7px;
    line-height: 20px;
    background-color: rgba(0, 110, 255, 100);
    text-align: center;
    border: 1px solid rgba(0, 110, 255, 100);
    border-radius: 20px;
  }
}

.gird-operating-btns {
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
  bottom: 0;
  display: none;
  border: none;
}

.project-grid-item-view:hover .gird-operating-btns {
  display: block;
}

.project-grid-view-preimg {
  width: 143px;
  height: 121px;
}

.project-grid-view-time {
  color: rgba(144, 147, 153, 100);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  margin: 0;
}

.project-page-view {
  margin-top: 30px;
}
</style>